<template>
  <div class="p-16px">
    <el-card>
      <el-space>
        <el-button type="primary" @click="handleCreate">新建</el-button>
      </el-space>
    </el-card>
    <el-card class="mt-16px">
      <el-table :data="tableData" border row-key="id" v-loading="loading">
        <el-table-column
          prop=""
          label="编号"
          type="index"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="versionName"
          label="版本名称"
          min-width="200"
        ></el-table-column>
        <el-table-column
          prop="versionOrderCode"
          label="版本号"
          min-width="200"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          min-width="200"
        ></el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button
              link
              :type="row.isEnable === 1 ? 'danger' : 'success'"
              size="small"
              @click="handleStatus(row)"
            >
              {{ row.isEnable === 1 ? "禁用" : "启用" }}
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="handleUpdate(row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-16px flex justify-end">
        <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          layout="prev, pager, next"
          background
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog v-model="isShowDialog" :title="form.id ? '编辑' : '新建'">
      <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
        <el-form-item label="版本名称" prop="versionName">
          <el-input v-model="form.versionName" placeholder="请输入版本名称" />
        </el-form-item>
        <el-form-item label="版本号" prop="versionOrderCode">
          <el-input
            type="number"
            v-model="form.versionOrderCode"
            placeholder="请输入版本号"
          />
        </el-form-item>
        <el-form-item label="设备类型" prop="deviceType">
          <el-select v-model="form.deviceType" placeholder="请选择设备类型">
            <el-option value="SPRING_CABINET" label="弹簧柜"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下载地址" prop="downloadUrl">
          <el-input v-model="form.downloadUrl" placeholder="请输入下载地址" />
        </el-form-item>
        <el-form-item label="是否启用" prop="isEnable">
          <el-switch
            v-model="form.isEnable"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit(formRef)">
            提交
          </el-button>
          <el-button @click="isShowDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="js" setup>
import { ref, onMounted } from "vue";
import { useCommonStoreHook } from "@/store/modules/common";
import dayjs from "dayjs";

const commonStore = useCommonStoreHook();
const formRef = ref();
const formDefaultValue = {
  versionName: "",
  versionOrderCode: "",
  deviceType: "",
  isEnable: 0,
  downloadUrl: "",
};
const form = ref({
  ...formDefaultValue,
});
const submitLoading = ref(false);
const loading = ref(false);
const rules = {
  versionName: [{ required: true, message: "请输入版本名称", trigger: "blur" }],
  versionOrderCode: [
    { required: true, message: "请输入版本号", trigger: "blur" },
  ],
  deviceType: [{ required: true, message: "请选择设备类型", trigger: "blur" }],
  downloadUrl: [{ required: true, message: "请输入下载地址", trigger: "blur" }],
};
const isShowDialog = ref(false);
const tableData = ref([]);

const handleCreate = () => {
  form.value = { ...formDefaultValue };
  isShowDialog.value = true;
};
const handleUpdate = (item) => {
  form.value = { ...formDefaultValue, ...item };
  isShowDialog.value = true;
};
const handleStatus = (item) => {
  const isEnable = item.isEnable === 1 ? 0 : 1;
  loading.value = true;
  commonStore
    .enableDeviceVersionConfig({ id: item.id, isEnable })
    .then(() => {
      fetchList();
    })
    .finally(() => {
      loading.value = false;
    });
};
const fetchList = () => {
  loading.value = true;
  commonStore
    .getDeviceVersionConfigList({})
    .then((res) => {
      tableData.value = res.map((item) => ({
        ...item,
        updateTime: item.updateTime
          ? dayjs(item.updateTime).format("YYYY-MM-DD HH:mm:ss")
          : "",
      }));
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSubmit = (formEl) => {
  formEl.validate((valid) => {
    if (valid) {
      submitLoading.value = true;
      if (form.value.id) {
        commonStore
          .updateDeviceVersionConfig(form.value)
          .then(() => {
            fetchList();
            isShowDialog.value = false;
          })
          .finally(() => {
            submitLoading.value = false;
          });
      } else {
        commonStore
          .addDeviceVersionConfig(form.value)
          .then(() => {
            fetchList();
            isShowDialog.value = false;
          })
          .finally(() => {
            submitLoading.value = false;
          });
      }
    }
  });
};

onMounted(() => {
  fetchList();
});
</script>

<style lang="scss" scoped></style>
